<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子工作日志</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>电子工作日志</h1>
        </header>

        <!-- 标签页导航 -->
        <div class="tabs">
            <button class="tab-btn active" data-tab="todo">待办事项</button>
            <button class="tab-btn" data-tab="daily">每日工作</button>
            <button class="tab-btn" data-tab="monthly">月度看板</button>
            <button class="tab-btn" data-tab="settings">设置</button>
        </div>

        <!-- 待办事项页面 -->
        <div class="tab-content active" id="todo">
            <div class="input-section">
                <input type="text" id="todoInput" placeholder="添加待办事项...">
                <button id="addTodoBtn">添加</button>
            </div>
            <div id="todoList" class="todo-list"></div>
        </div>

        <!-- 每日工作页面 -->
        <div class="tab-content" id="daily">
            <div class="date-nav">
                <button id="prevDay">上一天</button>
                <h2 id="currentDate"></h2>
                <button id="nextDay">下一天</button>
                <button id="todayBtn">今天</button>
            </div>
            
            <div class="work-tags-selection">
                <h3>选择标签</h3>
                <div id="workTagsList" class="work-tags-list"></div>
                <div id="selectedWorkTagDisplay" class="selected-tag-display"></div>
            </div>
            
            <div class="input-section">
                <textarea id="workInput" placeholder="添加工作记录..." rows="3"></textarea>
                <button id="addWorkBtn">添加</button>
            </div>
            <div id="dailyWorkList" class="daily-work-list"></div>
        </div>

        <!-- 月度看板页面 -->
        <div class="tab-content" id="monthly">
            <div class="date-nav">
                <button id="prevMonth">上个月</button>
                <h2 id="currentMonth"></h2>
                <button id="nextMonth">下个月</button>
                <button id="currentMonthBtn">当前月</button>
            </div>

            <div class="filter-section">
                <h3>按标签筛选</h3>
                <div id="filterTagsList" class="filter-tags-list"></div>
            </div>

            <div class="calendar-section">
                <div id="calendarGrid" class="calendar-grid"></div>
            </div>

            <div class="stats-section">
                <h3>月度统计</h3>
                <div id="statsContainer" class="stats-container"></div>
            </div>

            <div class="monthly-records-section">
                <h3>月度记录</h3>
                <div id="monthlyRecordsList" class="monthly-records-list"></div>
            </div>
        </div>

        <!-- 设置页面 -->
        <div class="tab-content" id="settings">
            <div class="tag-management">
                <h3>标签管理</h3>
                <div class="input-section">
                    <input type="text" id="tagNameInput" placeholder="标签名称...">
                    <div class="default-colors">
                        <button class="color-btn selected" data-color="#4CAF50"></button>
                        <button class="color-btn" data-color="#2196F3"></button>
                        <button class="color-btn" data-color="#FF9800"></button>
                        <button class="color-btn" data-color="#9C27B0"></button>
                        <button class="color-btn" data-color="#F44336"></button>
                        <button class="color-btn" data-color="#00BCD4"></button>
                        <button class="color-btn" data-color="#FFC107"></button>
                        <button class="color-btn" data-color="#795548"></button>
                    </div>
                    <input type="hidden" id="tagColorInput" value="#4CAF50">
                    <button id="addTagBtn">添加标签</button>
                </div>
                <div id="tagList" class="tag-list"></div>
            </div>
            
            <div class="export-section">
                <div class="input-section">
                    <button id="exportBtn" style="flex: 1;">导出数据</button>
                </div>
                <div class="input-section">
                    <button id="importBtn" style="flex: 1;">导入数据</button>
                    <input type="file" id="importFile" accept=".json" style="display: none;">
                </div>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>